<template>
  <el-dialog
    custom-class="video-dialog"
    title=""
    :visible.sync="isShow"
    :before-close="closeEvent"
    :show-close="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <div class="">
      <video
        :id="uuid"
        class="video-js"
        controls
        controlslist="nodownload"
        width="100%"
        height="470px"
      >
      <source
          :src="url"
          type="video/mp4"
      >
      </video>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'video-dialog',
  props: {
    url: {
      type: String,
      default: '',
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show: function (val) {
      this.isShow = val;
      if (val && this.url) {
        this.$nextTick(()=>{
          this.initialVideo();
        });
      }
    },
  },
  data() {
    return {
      uuid: '',
      isShow: false,
    };
  },
  methods: {
    initialVideo() {
      const dom = document.getElementById(this.uuid);
      dom.load();
      // dom.onended = () => {
      //   this.showbtn = true;
      // }
      // dom.addEventListener('ended', () => {
      //   console.log('结束');
      //   this.showbtn = true;
      // })
      dom.oncontextmenu = () => false
    },
    closeEvent() {
      const audio = document.querySelector(`#${this.uuid}`);
      audio.pause();
      audio.currentTime = 0;
      this.$emit('onClose');
    },
  },
  created() {
    this.uuid = `video${Math.ceil(Math.random() * 100)}${Math.floor(Math.random() * 100)}`
  },
};
</script>

<style lang="scss">
.video-dialog {
  &.el-dialog{
    border-radius: 8px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: none;
    width: 50% !important;
    margin: 0 !important;
    height: auto !important;
    .el-dialog__body{
      padding: 16px;
      .video-js {
        width: 100%;
      }
    }
  }
}
</style>
